<template>
  <div class="bg">
    <el-container class="bg">
      <el-header>
        <span class="nowtime">{{ nowTime }}</span>
        <top-header/>
      </el-header>
       
      <el-main>
        <div class="main-content">
          <el-row :gutter="20">
            <!-- 左边部分 -->
            <el-col :span="8">
              <div class="grid-content bg-purple">
                <Dashboard/>
                <Inventory/>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-main>
    </el-container>
  </div>


</template>
<script>
import topHeader from "@/views/visualized/topHeader.vue";
import Dashboard from "@/views/visualized/Dashboard.vue";
import Inventory from "@/views/visualized/Inventory.vue";


export default {
  name: "index",
  components: {topHeader, Dashboard, Inventory},
  data() {
    return {
      timer: "", //定义一个定时器
      nowTime: "",
      isLoading: true
    }
  },
  mounted() {
    this.getTime()
  },
  methods: {
    getTime() {
      this.timer = setInterval(() => {
        let timeDate = new Date();
        let year = timeDate.getFullYear();
        let mounth = timeDate.getMonth() + 1;
        let day = timeDate.getDate();
        let hours = timeDate.getHours();
        hours = hours >= 10 ? hours : "0" + hours;
        let minutes = timeDate.getMinutes();
        minutes = minutes >= 10 ? minutes : "0" + minutes;
        let seconds = timeDate.getSeconds();
        seconds = seconds >= 10 ? seconds : "0" + seconds;
        let week = timeDate.getDay();
        let weekArr = [
          "星期日",
          "星期一",
          "星期二",
          "星期三",
          "星期四",
          "星期五",
          "星期六",
        ];
        this.nowTime = `${year}-${mounth}-${day} ${weekArr[week]} ${hours}:${minutes}:${seconds}`
      }, 1000);
    },
}
}
</script>
<style lang="scss" scoped>
.bg {
  background-image: url('../../assets/images/bg.png');
  background-size: 100% 100%;
  background-color: #030409;
  box-shadow: 0 0 3px blue;
  color: #fff;
  width: 100%;
  height: 920px;
}
.nowtime{
  position: absolute;
  right: 10%;
}

</style>
